<template>
  <div>
    <headers></headers>
<!--    实验室概况-->
    <section class="Contain SubPage">
      <article class="SinglePage">
        <div class="Abouttxt1 clearfix">
          <div class="info animated animate__animated animate__fadeIn"  style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
            <h2 class="tithead">
              <span></span>
              实验室概况
              <i></i>
            </h2>
            <p align="justify">
          <span style="color: #666666;font-size: 16px">
           实验室主要方向：人工智能，物联网工程应用，服务器开发，网页架构，PCB设计<br>
            实验室主要成果：竞赛获奖，申请发明专利，撰写学术论文<br>
            加入实验室的好处：提供良好的学习环境，拓宽知识面，提高学习能力，累计项目经验。<br>
          </span>
            </p>
          </div>
          <div class="img animated animate__animated animate__fadeIn" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
            <img src="../assets/lab.jpg" width="50%" height="521" alt=""/>
          </div>
        </div>
      </article>
    </section>
<!--    人员管理-->
    <section class="BackGround">
      <div class="Contain SubPage">
        <div class="SubTitle animate__animated animate__fadeInUp" style="visibility: visible;">
          <h3>人员管理</h3>
          <p>People management</p>
        </div>
        <div class="Abouttxt2 flexsider clearfix animate__animated animate__fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
          <div class="viewport">
            <Row>
              <Card style="width: 260px;margin: 0 5px">
                <p slot="title">灵活开放的考勤机制</p>
                <ul>
                  <li>按规定进行考勤</li>
                  <li>进入刷卡签到，离开签退</li>
                  <li>周至少周一至周五共计1天，周末1天时间在实验室</li>
                  <li>不能参加实验室活动需请假</li>
                </ul>
              </Card>
              <Card style="width: 260px;margin: 0 5px">
                <p slot="title">健全充分的学习机制</p>
                <p>组成项目组，通过具体项目提升动手能力<br>高年级学长传帮带，提升学习能力</p>
              </Card>
              <Card style="width: 260px;margin: 0 5px">
                <p slot="title">开放协同的环境机制</p>
                <p>轮流承担实验室环境卫生</p>
              </Card>
              <Card style="width: 260px;margin: 0 5px">
                <p slot="title">目标导向的考核机制</p>
                <p>每周提交周工作报告，并参加组会</p>
              </Card>
            </Row>
          </div>
        </div>
      </div>
    </section>
<!--    实验室安排-->
    <section class="Contain SubPage">
      <div class="SubTitle animated animate__animated animate__fadeInUp" style="visibility: visible;">
        <h3>实验室安排</h3>
        <p>Laboratory arrangements</p>
      </div>
      <div class="Abouttxt3 flexsider animated animate__animated animate__fadeInUp" style="visibility: visible">
        <div style="display: inline-block;float:left;">
          <h3>实验室管理</h3>
         <Table stripe :columns="columns1" :data="data1" border></Table>
        </div>
        <div style="display: inline-block;margin-left: 40px">
          <h3>项目任务表</h3>
          <Table stripe :columns="columns2" :data="data2" border></Table>
        </div>
        <div style="margin: 20px 0">
          <div style="display: inline-block;float:left;">
            <h3>单周值日表</h3>
            <Table stripe :columns="columns3" :data="data3" border></Table>
          </div>
          <div style="display: inline-block;">
            <h3>双周值日表</h3>
            <Table stripe :columns="columns4" :data="data4" border></Table>
          </div>
        </div>

      </div>
    </section>
<!--    底部导航栏-->
    <footers></footers>
  </div>

</template>

<script>
import footers from "../components/footers.vue";
import headers from "../components/headers";
export default {
  name: "LaboratoryOverview",
  components:{
    headers,
    footers,
  },
  data () {
    return {
      columns1: [
        {
          title: '负责人',
          key: 'name',
          width: 100
        },
        {
          title: '负责事务',
          key: 'task',
          width: 250
        },
        {
          title: '负责同学',
          key: 'student',
          width: 150
        }
      ],
      data1: [
        {
          name: '文添',
          task: '总负责、竞赛组织、论文专利写作',
          student:'贾瑞鹏，余佳豪'
        },
        {
          name: '袁逢春',
          task: '期间采购、华为杯竞赛',
          student:''
        },
        {
          name: '孙毅豪',
          task: '考勤及门禁系统',
          student:'孙荣，黄子妮'
        },
        {
          name: '黄琦玮',
          task: '学习算法开发、项目合作',
          student:'王盼盼，胡振洋'
        },
        {
          name: '陈越',
          task: '网站维护及宣传',
          student:'付浩然，柯瑶池'
        },
        {
          name: '陈园',
          task: '实验室卫生，数据分析',
          student:'周伟博'
        },
        {
          name: '吴培龙',
          task: '器材管理',
          student:'谢冉，陈泓钰'
        },
        {
          name: '刘心怡',
          task: '服务器端开发',
          student:'张晚婷'
        }
      ],
      columns2: [
        {
          title: '任务名称',
          key: 'taskName',
          width: 150
        },
        {
          title: '负责同学',
          key: 'name',
          width: 100
        },
        {
          title: '具体任务',
          key: 'specificTask',
          width: 250
        },
        {
          title: '时间安排',
          key: 'time',
          width: 100
        }
      ],
      data2: [
        {
          taskName: '专利基于人工智能的节能灯控系统',
          name: '文添',
          specificTask:'将大创的实验成果转换成专利',
          time:'2021/5/1'
        },
        {
          taskName: '论文',
          name: '文添',
          specificTask:' ',
          time:'2021/7/10'
        },
        {
          taskName: '学习stm32',
          name: '陈泓钰',
          specificTask:'深度学习stm32的知识，标准库和HAL库',
          time:'2021/7/10'
        },
        {
          taskName: '服务外包创新大赛',
          name: '小组成员',
          specificTask:'刘负责小程序，吴数据分析，陈服务器',
          time:'2020/4/21'
        },
        {
          taskName: '专利-校园智能闹钟',
          name: '袁逢春',
          specificTask:'针对中学生，替换手机的作用',
          time:'2020/5/1'
        },
        {
          taskName: '环境监测web应用',
          name: '袁逢春',
          specificTask:'前后端软硬件结合开发',
          time:'2020/3/30'
        },
        {
          taskName: '基于人工智能的智慧节能灯控系统',
          name: '孙毅豪',
          specificTask:'完善现有技术，完成大创结项。',
          time:'2020/5/1'
        },
        {
          taskName: '门锁注册可视化和人员管理系统',
          name: '孙毅豪',
          specificTask:'完成web网页控制门锁完成人员注册，以及人员管理系统。',
          time:'2020/5/15'
        },
      ],
      columns3: [
        {
          title: '单周',
          key: 'weekday',
          width: 200
        },
        {
          title: '姓名',
          key: 'name',
          width: 300
        }
      ],
      data3: [
        {
          weekday: '组长',
          name: '陈园',
        },
        {
          weekday: '星期一',
          name: '孙荣',
        },
        {
          weekday: '星期二',
          name: '陈越，黄子妮',
        },
        {
          weekday: '星期三',
          name: '孙毅豪',
        },
        {
          weekday: '星期四',
          name: '付浩然',
        },
        {
          weekday: '星期五',
          name: '胡振洋',
        },
        {
          weekday: '星期六',
          name: '吴培龙',
        },
        {
          weekday: '星期日',
          name: '贾瑞鹏',
        },
      ],
      columns4: [
        {
          title: '双周',
          key: 'weekday',
          width: 200
        },
        {
          title: '姓名',
          key: 'name',
          width: 350
        }
      ],
      data4: [
        {
          weekday: '组长',
          name: '刘心怡',
        },
        {
          weekday: '星期一',
          name: '俞佳豪',
        },
        {
          weekday: '星期二',
          name: '张晚婷,柯瑶池',
        },
        {
          weekday: '星期三',
          name: '黄琦玮',
        },
        {
          weekday: '星期四',
          name: '王盼盼',
        },
        {
          weekday: '星期五',
          name: '谢冉',
        },
        {
          weekday: '星期六',
          name: '周伟博',
        },
        {
          weekday: '星期日',
          name: '陈泓钰',
        },
      ]
    }
  }
}
</script>

<style scoped>
ul, li, form, dl, dt, dd, div,  h1, h2, h3, h4, h5, h6, p, em, i {
  font-style: normal;
  list-style: none;
  padding: 0;
  margin: 0;
}
/*实验室概况*/
.SubPage {
  height: auto !important;
  min-height: 280px;
  padding-bottom: 75px;
}
.Contain {
  width: 1200px;
  margin: 0 auto;
}
.SinglePage {
  word-wrap: break-word;
  line-height: 34px;
  font-size: 16px;
}
.animated{
  animation-duration: 1s;
  animation-fill-mode: both;

}
.Abouttxt1 {
  padding-top: 80px;
}
.clearfix{
  overflow: hidden;
}
.info {
  float: left;
  width: 500px;
}
.tithead {
  line-height: 43px;
  font-size: 36px;
  color: #1a1a1a;
  background: url(https://www.pmlabs.com.cn/templets/pml/cn/images/aboutbg.png) right center no-repeat;
  width: 404px;
  margin-bottom: 50px;
}
.tithead span {
  font-weight: normal;
  display: block;
  text-transform: uppercase;
  padding-top: 28px;
  color: #999999;
  font-size: 18px;
}
.tithead i {
  display: block;
  border-bottom: 2px solid #38a6f0;
  width: 50px;
  height: 26px;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.Abouttxt1 .img {
  float: right;
}
.img img{
  width: 480px !important;
  max-width: 100%;
  vertical-align: middle;
}

/*中间部分*/
.BackGround{
  clear: both;
  background: #e3f1fc;
}
.SubTitle{
  text-align: center;
  padding: 58px 0 55px;
}
.SubTitle h3 {
  font-weight: normal;
  color: #1a1a1a;
  font-size: 36px;
  line-height: 60px;
}
.SubTitle p{
  text-transform: uppercase;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  color: #999999;
  font-style: normal;
  list-style: none;
  padding: 0;
  margin: 0;
}
.Abouttxt2 {
  margin: 0;
  position: relative;
  padding: 0 38px;
}
.viewport{
  overflow: hidden;
  position: relative;
  max-height: 2000px;
  transition: all 1s ease;
}
.clearfix{
  overflow: hidden;
}
.flexsider{
  zoom: 1;
}
/*实验室管理*/
.Abouttxt3 ul {
  margin-left: -30px;
  height: 450px;
  overflow: hidden;
  padding-top: 10px;
}
.Abouttxt3 li {
  box-shadow: 0 0 20px #ddd;
  height: 300px;
  width: 386px;
  float: left;
  margin: 0 0 20px 20px;
  -webkit-transition: all 0.2s linear;
}
table{
  border-collapse: collapse;
}
table, td, th
{
  border:1px solid black;
}
td
{
  height:35px;
  vertical-align:bottom;
}
</style>